<template>
  <div>
    <h3>没有使用modules</h3>
    <div>
      <h2>
        {{ num }}
      </h2>
      <!-- -- {{ newCount }} -->
      <!-- <h4>State: {{ count }}</h4>
      <h4>State: {{ num }}</h4>
      <h4>State: {{ list }}</h4> -->
    </div>
    <button @click="add">++</button>
    <button @click="del">----</button>
    <button @click="init">异步</button>
  </div>
</template>

<script>
// 辅助函数
// mapState        映射vuex中的State到当前组件
// mapGetters      映射vuex中的Getters到当前组件
// mapMutations    映射vuex中的Mutations到当前组件
// mapActions   映射vuex中的mapActions到当前组件
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// console.log(mapState(["count", "num", "list"]));
export default {
  //   computed: mapState(["count", "num", "list"]),

  computed: {
    ...mapState(["count", "num", "list"]),
    ...mapGetters(["newCount"]),
  },

  //   computed: {
  //     count: mapState(["count"]).count,
  //     num: mapState(["num"]).num

  //     // ...mapState(["count", "num", "list"])
  //     // count: mapState(["count"]).count,
  //     // num: mapState(["num"]).num,
  //     // list: mapState(["list"]).list,
  //   },
  created() {
    // console.log(this.count)
  },
  methods: {
    // 映射Mutations
    ...mapMutations(["add", "del"]),
    // 映射Actions
    ...mapActions(["init"]),

    // add() {
    //     this.$store.commit("add")
    // }
    // init() {
    //     this.$store.dispatch("init")
    // }
  },
};
</script>

<style>
</style>